<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Cards</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

</head>

<body>
    <div class="cards">
        <article class="card">
            <div class="card__preview">
                <img src="assets/lakeview-elegance.png" alt="Lakeview Elegance preview">
                <div class="card__price">
                    $4,750,000
                </div>
            </div>
            <div class="card__content">
                <h2 class="card__title">Lakeview Elegance</h2>
                <p class="card__address">
                    258 Serenity Lane, Crestwood Hills
                </p>
                <p class="card__description">
                    Nestled along the tranquil shores of a pristine lake, Lakeview Lakeside offers an idyllic escape
                    into nature's embrace.
                    This exquisite property combines rustic charm with modern luxury, featuring a spacious, elegantly
                    designed home with
                    panoramic lake views. Each room is crafted to maximize the connection with the natural surroundings,
                    offering large
                    windows and outdoor spaces that blend seamlessly with the serene lakeside setting.
                </p>
                <div class="card__bottom">
                    <div class="card__properties">
                        3 Bed | 2 Bath | 7,500 sq. ft
                    </div>
                    <button class="card__btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
                        </svg>
                    </button>
                </div>
            </div>
        </article>
        <article class="card">
            <div class="card__preview">
                <img src="assets/vista-paradiso.png" alt="Vista Paradiso">
                <div class="card__price">
                    $4,500,000
                </div>
            </div>
            <div class="card__content">
                <h2 class="card__title">Vista Paradiso</h2>
                <p class="card__address">
                    123 Paradise Road, Lakeview
                </p>
                <p class="card__description">
                    Vista Paradiso is an epitome of modern luxury, nestled against a backdrop of a breathtaking lake and
                    verdant scenery.
                    The home features expansive glass windows and a generous terrace, offering unparalleled views and a
                    seamless
                    indoor-outdoor living experience. Designed for those who seek elegance and tranquility, it's
                    equipped with top-tier
                    amenities.
                </p>
                <div class="card__bottom">
                    <div class="card__properties">
                        4 Bed | 2 Bath | 7,000 sq. ft
                    </div>
                    <button class="card__btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
                        </svg>
                    </button>
                </div>
            </div>
        </article>
        <article class="card">
            <div class="card__preview">
                <img src="assets/skyline-oasis.png" alt="Skyline Oasis">
                <div class="card__price">
                    $5,200,000
                </div>
            </div>
            <div class="card__content">
                <h2 class="card__title">Skyline Oasis</h2>
                <p class="card__address">
                    450 Metropolitan Ave, Downtown
                </p>
                <p class="card__description">
                    Skyline Oasis is a beacon of modern urban luxury, located in the heart of the city. This residence
                    features a sleek
                    design with eco-friendly elements, large balconies, and a stunning rooftop garden, offering a unique
                    panoramic view of
                    the city's skyline. The fusion of high-tech amenities and sophisticated style makes it an ideal
                    choice for those who
                    enjoy the vibrancy of city life without compromising on privacy and luxury.
                </p>
                <div class="card__bottom">
                    <div class="card__properties">
                        3 Bed | 3 Bath | 3,000 sq. ft
                    </div>
                    <button class="card__btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
                        </svg>
                    </button>
                </div>
            </div>
        </article>
    </div>
    <script src="script.js"></script>
</body>

</html>